<!-- 个人中心 -->
<template>
	<view class="app-box" :style="{ height: appHeight + 'px' }">
		<view class="userBg">
			<image src="@/static/image/user/userBg.png" mode="widthFix" style="width: 750rpx" />

			<view class="headImg flex-cc" @click="toSetUser">
				<i class="iconfont icon-Vector2" style="color: #6baeff; font-size: 70rpx"></i>
				<!-- <image :src="userInfo.headImg" style="width: 100%; height: 100%" /> -->
			</view>

			<template v-if="isLogin">
				<view class="userInfo-name">{{ userInfo.nickName }}</view>
				<view class="userInfo-id">ID：{{ userInfo.id }}</view>
				<view class="btnToLogin-line"></view>
				<view class="backBtn" @click="show = true">退出</view>
			</template>
			<template v-else>
				<view class="btnToLogin" @click="btnToLogin">立即登录</view>
				<view class="btnToLogin-line"></view>
			</template>
		</view>

		<view class="cell-list">
			<view class="cell-sin" v-for="(i, index) in cellList" :key="index" @click="turnTo(i)" v-show="i.isShow">
				<view class="flex-cc">
					<i :class="`iconfont ${i.icon}`" :style="{ color: i.color }"></i>
					<text class="ml15">{{ i.name }}</text>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<u-modal
			v-model="show"
			content="确认退出当前账号？"
			show-cancel-button
			@confirm="confirm"
			@cancel="show = false"
		></u-modal>
		<!-- <areaSelect v-model="areaCode"></areaSelect> -->
		<!-- <view class="fs30">
				{{ isApp }}
				{{ infoE }}
			</view> -->
		<!-- <u-empty text="开发中" mode="list"></u-empty> -->
	</view>
</template>

<script>
	import areaSelect from '../../components/common/select/areaSelect.vue'
	import indexApi from '@/api/index.js'
	export default {
		components: {
			areaSelect
		},
		data() {
			return {
				appHeight: 0,

				cellList: [],
				isLogin: false,
				userInfo: {
					id: '49f140236ad06f506b0018c4d9bd8134',
					nickName: '三明市管理员'
				},
				show: false
			}
		},

		watch: {},
		async mounted() {
			this.appHeight = await this.$getHeight()
			this.initPage()
			uni.$on('updateUserInfo', () => {
				this.initPage()
			})
		},

		methods: {
			async initPage() {
				// const userInfo = uni.getStorageSync('userInfo')
				const getUserInfoData = uni.getStorageSync('getUserInfoData')

				if (getUserInfoData) {
					this.userInfo = getUserInfoData
					this.isLogin = true
				} else {
					this.isLogin = false
				}
				// // 判断乡镇用户
				// if (getUserInfoData.dept.parentCode && getUserInfoData.dept.parentCode != '350400000000') {
				// 	// this.cellList.splice(1, 1)
				// }
				let rolesList = this.$getItem('rolesList')
				let nameList = ['管理员', '超级管理员']
				this.cellList = [
					{
						isShow: true,
						name: '关注站点',
						icon: 'icon-a-guanzhu-yiguanzhu2',
						page: '/pages/home/followSite',
						color: '#FF9900'
					},
					{ isShow: true, name: '报给我的', icon: 'icon-a-wenben12', page: 'custom', color: '#41A4FF' },
					{
						// 市级用户才显示
						isShow: getUserInfoData.dept.code == '350400000000',
						name: '在线人员',
						icon: 'icon-a-geren1',
						page: '/pages/user/online',
						color: '#788FFF'
					},
					{
						isShow: this.arrayContainsField(rolesList, nameList, 'name'),
						name: '人员管理',
						icon: 'icon-Vector2',
						page: '/pages/user/personMag',
						color: '#666'
					},
					{ isShow: true, name: '用户指南', icon: 'icon-shishizhinan', page: 'userGuide', color: '#5BBB93' },

					{ isShow: true, name: '关于', icon: 'icon-guanyu', page: '/pages/user/about', color: '#839ACC' }
				]
			},
			arrayContainsField(arrayA, arrayB, field) {
				const fieldValues = arrayA.map((obj) => obj[field])
				return arrayB.some((value) => fieldValues.includes(value))
			},
			btnToLogin() {
				uni.navigateTo({ url: '/pages/user/login?data=' + '/pages/index/tabbar' })
			},
			confirm() {
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('getUserInfoData')
				uni.removeStorageSync('getDeptTreeData')
				this.isLogin = false

				// 是否记住密码了
				let isReMima = this.$getItem('isReMima') || false
				if (isReMima) {
					let data = this.$getItem('rePass')
					uni.clearStorageSync()
					this.$setItem('rePass', data)
					this.$setItem('isReMima', true)
				} else {
					uni.clearStorageSync()
				}
				uni.reLaunch({ url: '/pages/user/login' })

				uni.webView.postMessage({
					data: {
						message: 'loginOut'
					}
				})
			},
			turnTo(item) {
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo) {
					uni.showToast({
						icon: 'error',
						title: '请先登录'
					})
					return
				}
				if (item.page == 'custom') {
					uni.$emit('changeTabbar', { pageCur: 'decision', tab: 'events', current: 'reportToMe' })
				} else if (item.page == 'userGuide') {
					let obj = {
						title: '用户指南',
						type: 'url',
						url: '../../static/userGuide.pdf'
					}
					uni.navigateTo({ url: `/pages-subPackages/monitor/shPdf?title=${obj.title}&type=${obj.type}&url=${obj.url}` })
				} else {
					uni.navigateTo({ url: item.page })
				}
			},
			toSetUser() {
				uni.navigateTo({ url: '/pages/user/personSetting' })
			}
		},
		beforeDestroy() {
			uni.$off('updateUserInfo')
		}
	}
</script>

<style lang="scss" scoped>
	.democe {
		width: 750rpx;
		background: red;
	}

	.app-box {
		position: relative;
		overflow: hidden;
		width: 750rpx;
	}

	.cell-list {
		width: 750rpx;

		.cell-sin {
			background: #fff;
			padding: 0 50rpx;
			width: 750rpx;
			height: 83rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.063);
		}
	}

	.userBg {
		width: 750rpx;
		position: relative;
		// position: absolute;
		// top: 0;

		.headImg {
			position: absolute;
			width: 126rpx;
			height: 126rpx;
			left: 50rpx;
			top: 153rpx;
			background: #ffffff;
			box-shadow: 0rpx 4rpx 30rpx rgba(65, 164, 255, 0.33);
			border-radius: 50%;
			overflow: hidden;
		}

		.btnToLogin {
			position: absolute;
			font-size: 34rpx;
			left: 260rpx;
			top: 163rpx;
			display: flex;
			align-items: center;
			text-align: center;
			letter-spacing: 3rpx;
			color: #ffffff;
		}

		.btnToLogin-line {
			position: absolute;
			width: 479.99rpx;
			height: 3.56rpx;
			left: 213rpx;
			top: 227rpx;

			background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 255, 0.71));
		}
	}

	.userInfo-name {
		position: absolute;
		// width: 154rpx;
		height: 50rpx;
		left: 213rpx;
		top: 169rpx;

		font-weight: 600;
		font-size: 46rpx;
		line-height: 64rpx;
		display: flex;
		align-items: center;
		text-align: center;

		color: #ffffff;
	}

	.userInfo-id {
		position: absolute;
		// width: 163rpx;
		height: 34rpx;
		left: 214rpx;
		top: 232rpx;

		font-size: 24rpx;
		line-height: 34rpx;
		/* identical to box height */

		display: flex;
		align-items: center;
		text-align: center;

		color: #ffffff;
	}

	.backBtn {
		position: absolute;
		right: 63rpx;
		top: 169rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		text-align: center;
		color: #fff;
		background: #ff5f5f;
		padding: 7rpx 29rpx;
		border-radius: 12rpx;
		box-shadow: 0rpx 3rpx 10rpx rgba(0, 0, 0, 0.61);
		// color: #ffffff;
	}
</style>
